<!--
	Desc: 	表管理的编辑界面
	Author: caochaofeng
	Date: 	2019-04-10 17:20:53
-->

<template>
  <el-dialog
    :title="!dataForm.id ? '新增生成配置' : '编辑生成配置'"
    :close-on-click-modal="false"
    :fullscreen="true"
    :append-to-body="true"
    :visible.sync="visible">
    <el-form ref="dataForm" :model="dataForm" label-width="120px" @keyup.enter.native="dataFormSubmit()">
      <el-form-item :rules="[{required: true,message: '请输入表名'}]" label="表名" prop="tableName">
        <CrudSelect :dic="selectTableList" v-model="dataForm.tableName" clearable filterable/>
      </el-form-item>
      <el-form-item :rules="[{required: true,message: '请输入表说明'}]" label="表说明" prop="comments">
        <el-input v-model="dataForm.comments"/>
      </el-form-item>
      <el-form-item label="父表表名" prop="parentTable">
        <CrudSelect :dic="selectTableList" v-model="dataForm.parentTable" clearable/>
      </el-form-item>
      <el-form-item label="当前表外键" prop="parentTableFk">
        <CrudSelect :dic="columnList" v-model="dataForm.parentTableFk"/>
      </el-form-item>
      <el-form-item label="备注" prop="description">
        <el-input v-model="dataForm.description" type="textarea"/>
      </el-form-item>

      <el-table
        :data="dataForm.columnFormList"
        :height="tableContainerHeight"
        :style="'width:100%;height:'+tableContainerHeight"
        border
      >
        <el-table-column
          label="列名"
        >
          <template slot-scope="scope">
            <span :title="scope.row.name">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="说明"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.comments" size="small"/>
          </template>
        </el-table-column>
        <el-table-column
          label="物理类型"
          prop="jdbcType"

        />
        <el-table-column
          label="JAVA类型"
          width="120"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.javaType" filterable placeholder="请输入" size="small">
              <el-option
                v-for="item in javaTypeList"
                :title="item.value"
                :key="item.value"
                :label="item.value"
                :value="item.value"
                style="width:100px"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="JAVA属性名称"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.javaField" size="small"/>
          </template>
        </el-table-column>
        <el-table-column
          label="主键"
          width="50"
        >
          <template
            scope="scope"
          >
            <el-checkbox v-model="scope.row.isPk"/>
          </template>
        </el-table-column>
        <el-table-column
          label="可空"
          width="50"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isNull"/>
          </template>
        </el-table-column>
        <el-table-column
          label="插入"
          width="50"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isInsert"/>
          </template>
        </el-table-column>
        <el-table-column
          label="编辑"
          width="50"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isEdit"/>
          </template>
        </el-table-column>
        <el-table-column
          label="列表"
          width="50"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isList"/>
          </template>
        </el-table-column>
        <el-table-column
          label="查询"
          width="50"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isQuery"/>
          </template>
        </el-table-column>
        <el-table-column
          label="查询匹配方式"
          width="120"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.queryType" filterable placeholder="请输入" size="small">
              <el-option
                v-for="item in queryTypeList"
                :title="item.value"
                :key="item.value"
                :label="item.value"
                :value="item.value"
                style="width:120px"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="显示表单类型"
          width="120"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.showType" filterable placeholder="请输入" size="small">
              <el-option
                v-for="item in showTypeList"
                :title="item.label"
                :key="item.value"
                :label="item.value"
                :value="item.value"
                style="width:100px"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="字典类型"
          width="70"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.dictType" size="small"/>
          </template>
        </el-table-column>
        <el-table-column
          label="排序"
          width="60"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" size="small"/>
          </template>
        </el-table-column>
      </el-table>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
    import mixinFormViewModule from '@/mixins/form-view-module'
    import * as API from '@/api/gen/table'
    import CrudSelect from '@/components/avue/crud-select'
    import CrudRadio from '@/components/avue/crud-radio'

    export default {
        components: {CrudSelect, CrudRadio},
        mixins: [mixinFormViewModule],
        data() {
            return {
                visible: false,
                tableContainerHeight: 200,
                columnFormList: [],
                javaTypeList: [],
                queryTypeList: [],
                showTypeList: [
                    {'value': 'input', 'label': '增删改查（单表）'},
                    {'value': 'input', 'label': '单行文本'},
                    {'value': 'textarea', 'label': '多行文本'},
                    {'value': 'select', 'label': '下拉选项'},
                    {'value': 'radio', 'label': '单选按钮'},
                    {'value': 'checkbox', 'label': '复选框'},
                    {'value': 'dateselect', 'label': '日期选择'},
                    {'value': 'userselect', 'label': '人员选择'},
                    {'value': 'orgselect', 'label': '部门选择'},
                    {'value': 'areaselect', 'label': '区域选择'},
                    {'value': 'treeselect', 'label': '树选择控件'},
                    {'value': 'fileselect', 'label': '文件上传选择'}
                ],
                columnList: [],
                selectTableList: [],
                dataForm: {
                    id: 0,
                    name: undefined,
                    comments: undefined,
                    className: undefined,
                    parentTable: undefined,
                    parentTableFk: undefined,
                    columnFormList: [],
                    status: undefined,
                    description: undefined
                },
                mixinViewModuleOptions: {
                    getInfoAPI: API.info, // 数据详情列表接口，API地址

                    addAPI: API.add, // 新增接口，API地址
                    updateAPI: API.update // 修改接口，API地址
                }
            }
        },
        methods: {
            // 获取部门列表
            initInfoBefore(id) {
                return API.select({}).then((res) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.selectTableList = res.data
                }).catch(() => {
                })
            }
        }
    }
</script>
